<template>
    <view class="popup-child pf x-f" v-if="show" @touch.stop.prevent="">
        <view class="mask pa"></view>
        <view class="popup">
            <view class="top_image pr tc">
                <image :src="group_logo" mode=""></image>
            </view>

            <view class="content pr tc">
                <view class="group">
                    <view class="content_title">可参与的拼单</view>
					<scroll-view scroll-y="true" style="height: 685rpx;">
                    <view class="group_item x-bc" v-for="(item,index) in data">
                        <view class="left">
                            <template v-for="(list, index) in item.memberList">
                                <image v-if="list.is_main == 1" class="pic_url" :src="list.pic_url">
                                </image>
                            </template>
                            <view class="left_text tl">
                                <view class="title">
                                    <text class="username">{{item.nickname}}</text>
                                    <text class="time">
                                        还差
                                        <text class="red">{{item.group_max_member - item.group_number}}人</text>
                                        拼成
                                    </text>
                                </view>
                                剩余
                                <u-count-down class="time" :timestamp="item.endTime" color="#999999" font-size="22"
                                    height="36" separatorSize="22" separatorColor="#999999">
                                </u-count-down>

                            </view>
                        </view>
                        <view class="right"  @tap.stop="go_group(item)">
                            参与拼团
                        </view>
                    </view>
					</scroll-view>
                </view>
            </view>


            <view class="close" @tap="close">
                <image :src="close_img" mode=""></image>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        name: "popups",
        props: {
            data: {
                type: Array,
                default: []
            }
        },
        data() {
            return {
                show: false, // 弹窗开关
                close_img: this.imgUrl + 'close.png',
                group_logo: this.imgUrl + 'group_logo.png'
            };
        },
        methods: {
            go_group(item) {
                // 向上传递
                this.$emit('go_group');
                // 将数据保存至VUEX中
                this.$store.dispatch('goods/get_groupKey', item.order_group_no);
                // 关闭弹窗
                this.show = false;
            },
			close() {
				this.show = false
				// 向上传递
				this.$emit('go_close');
			}
        }
    }
</script>

<style lang="scss" scoped>
    @import './index.scss';
</style>
